<template>

    <Form ref="formValidate" :model="formValidate" :label-width="80" :rules="ruleValidate" style="position: relative;"> 
        <FormItem label="现住址" prop="current_address.zh">
            <div>
            <Input v-model="formValidate.current_address.zh" placeholder="现住址" style="width:80%"></Input>
            </div>
        </FormItem>
        <FormItem label="通讯住址" prop="communication_address.zh">
            <div>
            <Input v-model="formValidate.communication_address.zh" placeholder="通讯住址" style="width:80%"></Input>
            </div>
        </FormItem>
        <FormItem label="家庭地址" prop="home_address.zh">
            <div>
            <Input v-model="formValidate.home_address.zh" placeholder="家庭地址" style="width:80%"></Input>
            </div>
        </FormItem>
        <FormItem label="联系电话" prop="tel">
            <div>
        <Input v-model="formValidate.tel" number placeholder="联系电话" :maxlength='11' style="width:80%"></Input>
            </div>
        </FormItem>
        <FormItem label="邮箱" prop="email">
            <div>
        <Input v-model="formValidate.email" placeholder="邮箱" style="width:80%"></Input>
            </div>
        </FormItem>
        <FormItem label="邮编" prop="postal_code">
            <div>
        <Input v-model="formValidate.postal_code" placeholder="邮编" number :maxlength='6' style="width:80%"></Input>
            </div>
        </FormItem>
        <FormItem label="主页地址">
            <div>
            <AutoComplete
                v-model="formValidate.index_address"
                @on-search="handleSearch2"
                placeholder="主页地址"
                style="width:200px">
                <Option v-for="item in data2" :value="item" :key="item">{{ item }}</Option>
            </AutoComplete>
            </div>
        </FormItem>
        <FormItem style="width:90%;">
        <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
        </FormItem>                       
        <div style="clear:both"></div>
        <Spin size="large" fix v-if="spinShow"></Spin>                     
    </Form> 
</template>
<script>
export default {
    props: {
        infoOld: {
            type: [Boolean,Number,Object,Array],
            default: false
        },
        typeother: {
            type: [Boolean,String],
            default: false
        }
    },
    data() {    
        const validateTel = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请输入联系电话'));
            }
            let tel = /^[1][3,4,5,7,8][0-9]{9}$/;
            // 模拟异步验证效果
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    if (!tel.test(value)) {
                        callback(new Error('请输入正确手机号'));
                    } else {
                        callback();
                    }
                }
            }, 1000);
        };
        const validatePostalCode = (rule, value, callback) => {
            setTimeout(() => {
                if (!value) {
                    return callback(new Error('请填写邮编'));
                }else if (value.toString().length!=6) {
                    return callback(new Error('邮编6位'));
                }if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                }else{
                    callback();
                }
            }, 1000);
        };
        return {
            infoUrl:`api/student/v1/studentcontact/lists/${this.infoOld.contact?this.infoOld.contact.student_contact_id : ''}`,//请求单条数据
            saveUrl:'',//保存接口
            saveType:null,//保存方式
            
            spinShow:false,
       
            data2: [],
            
            infoOldObj:null,// 个人辅助数据
            
            // 个人辅助信息
            formValidate: { 
                tel: null,//电话
                email:null,//邮箱
                postal_code:null,//邮政编码
                index_address:null,//主页地址
                current_address:{//现住址名称
                    zh:'',
                    mn:'',
                    en:'',                    
                },
                communication_address:{//通讯地址名称
                    zh:'',
                    mn:'',
                    en:'',                    
                },
                home_address:{//家庭住址名称
                    zh:'',
                    mn:'',
                    en:'',                    
                },                
                user_id:this.infoOld.user_id,           
            },
            ruleValidate: {
                tel: [
                    { validator: validateTel, trigger: 'blur' }
                ],
                email: [
                    {type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
                ],
                postal_code: [
                    { validator: validatePostalCode, trigger: 'blur' }
                ],
            },
        }
    },
    methods: {
        
        /************************************************************
         * 
         * 单条获取个人辅助信息
         * 
         ************************************************************/
        infoData(){
            this.spinShow=true
            this.$http.get(this.infoUrl).then(val=>{ 
                this.infoOldObj = JSON.parse(JSON.stringify(val.data))
                this.formValidate.tel = this.infoOldObj.tel?parseInt(this.infoOldObj.tel):''// 电话
                this.formValidate.email = this.infoOldObj.email// 邮箱
                this.formValidate.postal_code = this.infoOldObj.postal_code?parseInt(this.infoOldObj.postal_code):''// 邮政编码
                this.formValidate.index_address = this.infoOldObj.index_address// 主页地址
                this.formValidate.current_address = this.infoOldObj.current_address?this.infoOldObj.current_address:this.formValidate.current_address// 现住址名称
                this.formValidate.home_address = this.infoOldObj.home_address?this.infoOldObj.home_address:this.formValidate.home_address// 家庭住址名称
                this.formValidate.communication_address = this.infoOldObj.communication_address?this.infoOldObj.communication_address:this.formValidate.communication_address// 通讯住址名称

                this.spinShow=false
            }).catch(err=>{
                console.log(err);
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
                this.spinShow=false
            })
        },
        
        /************************************************************
         * 
         * 个人辅助信息提交
         * 
         ************************************************************/
        handleSubmit (name) {
            console.log(this.formValidate)
            this.$refs[name].validate((valid) => {
                if (valid) {   
                    this.spinShow=true    
                    this.saveType(this.saveUrl,this.formValidate)
                    .then(val=>{
                        this.$Message.success(val.message);
                        this.$emit('expandback',true)
                        this.spinShow=false
                    }) 
                    .catch(err=>{
                        console.log(err);
                        if(err.code && err.code==422) {
                            this.$Message.error(err.message);
                        }
                        this.spinShow=false
                    })
                } else {
                    this.$Message.error("表单验证失败!");
                }    
            })
        },
        
        /************************************************************
         * 
         * 地址
         * 
         ************************************************************/
        handleSearch2 (value) {
            this.data2 = !value || value.indexOf('http://') >= 0 || value.indexOf('https://') >= 0 ? [] : [
                'http://'+value ,
                'https://'+value ,
            ];
        },


    },
    created() {
        if(this.infoOld.contact){
            // 如果有值 就是修改
            this.infoData()
            this.saveUrl=`api/student/v1/studentcontact/update/${this.infoOld.contact.student_contact_id}`
            this.saveType=this.$http.put
        }else{
            // 如果没有有值 就是添加  
            this.saveUrl='api/student/v1/studentcontact/create'
            this.saveType=this.$http.post
        }
    },    
    watch:{
        infoOld: {
            handler (val) {
                if(this.infoOld.contact){
                    // 如果有值 就是修改
                    // this.infoUrl=`api/student/v1/studentcontact/lists/${this.infoOld.contact?this.infoOld.contact.student_contact_id : ''}`,//请求单条数据
                    // this.infoData()
                    this.saveUrl=`api/student/v1/studentcontact/update/${this.infoOld.contact.student_contact_id}`
                    this.saveType=this.$http.put
                }else{
                    // 如果没有有值 就是添加  
                    this.saveUrl='api/student/v1/studentcontact/create'
                    this.saveType=this.$http.post
                }
            }
        },
    },

}

</script>